{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "/firefox/base/base-protocol.html" %}
{% from "macros-protocol.html" import callout with context %}

{# "noindex" pages should not have the canonical or hreflang tags: bug 1442331 #}
{% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}

{% block page_title %}{{ ftl('installer-help-page-title') }}{% endblock %}
{% block body_id %}installer-help{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-card') }}
  {{ css_bundle('installer_help') }}
  {{ css_bundle('protocol-callout') }}
{% endblock %}

{% block site_header %}
  {% with hide_nav_cta=True %}
    {% include 'includes/protocol/navigation/navigation.html' %}
  {% endwith %}
{% endblock %}

{% if installer_channel == 'beta' %}
  {% set channel_logo = 'protocol/img/logos/firefox/browser/beta/logo-word-hor.svg' %}
{% elif installer_channel == 'alpha' %}
  {% set channel_logo = 'protocol/img/logos/firefox/browser/developer/logo-word-hor.svg' %}
{% elif installer_channel == 'nightly' %}
  {% set channel_logo = 'protocol/img/logos/firefox/browser/nightly/logo-word-hor.svg' %}
{% else %}
  {% set channel_logo = 'protocol/img/logos/firefox/browser/logo-word-hor.svg' %}
{% endif %}

{% if installer_channel %}
  {% set call_out_desc = ftl("installer-help-action-channel") %}
{% else %}
  {% set call_out_desc = ftl("installer-help-action-choose") %}
{% endif %}

{% block content %}
<main class="mzp-l-content">
<section class="mzp-c-callout mzp-t-hero installer-callout">
    <div class="mzp-l-content">
      <h1 class="mzp-c-callout-title">{{ ftl('installer-help-page-title') }}</h1>
      <p class="mzp-c-callout-desc">
        {{ ftl('installer-help-main-tagline') }}
        <span>{{ call_out_desc }}</span>
      </p>
    </div>
  </section>

  {% if installer_channel %}
    <section class="installer-channel-card mzp-c-card mzp-c-card-extra-small">
      <img src="{{ static(channel_logo) }}" alt="{{ ftl('installer-help-firefox-release-title') }}" width="347" height="64">
      <div class="mzp-c-card-content">
        {{ download_firefox(installer_channel, platform='desktop', force_direct=True, force_full_installer=True, locale=installer_lang, button_class='mzp-t-md', alt_copy=ftl('download-button-download-now')) }}
      </div>
    </section>
  {% else %}
    <div class="mzp-l-card-quarter">
      <section class="mzp-c-card mzp-c-card-extra-small">
        <img src="{{ static('protocol/img/logos/firefox/browser/logo-word-hor.svg') }}" alt="{{ ftl('installer-help-firefox-release-title') }}" width="347" height="64" class="mzp-c-card-image">
        <div class="mzp-c-card-content">
          <p class="mzp-c-card-desc">
            {{ ftl('installer-help-firefox-release-desc-v2', trackers=2000) }}
          </p>
          {{ download_firefox(platform='desktop', force_direct=True, force_full_installer=True, locale=installer_lang, button_class='mzp-t-secondary mzp-t-md', alt_copy=ftl('download-button-download-now')) }}
        </div>
      </section>

      <section class="mzp-c-card mzp-c-card-extra-small">
        <img src="{{ static('protocol/img/logos/firefox/browser/beta/logo-word-hor.svg') }}" alt="{{ ftl('installer-help-firefox-beta-title-v2') }}" width="347" height="64" class="mzp-c-card-image">
        <div class="mzp-c-card-content">
          <p class="mzp-c-card-desc">
            {{ ftl('installer-help-firefox-beta-desc') }}
          </p>
          {{ download_firefox('beta', platform='desktop', force_direct=True, force_full_installer=True, locale=installer_lang, button_class='mzp-t-secondary mzp-t-md', alt_copy=ftl('download-button-download-now')) }}
        </div>
      </section>

      <section class="mzp-c-card mzp-c-card-extra-small">
        <img src="{{ static('protocol/img/logos/firefox/browser/developer/logo-word-hor.svg') }}" alt="{{ ftl('installer-help-firefox-developer-title-v2') }}" width="347" height="64" class="mzp-c-card-image">
        <div class="mzp-c-card-content">
          <p class="mzp-c-card-desc">
            {{ ftl('installer-help-firefox-developer-desc') }}
          </p>
          {{ download_firefox('alpha', platform='desktop', force_direct=True, force_full_installer=True, locale=installer_lang, button_class='mzp-t-secondary mzp-t-md', alt_copy=ftl('download-button-download-now')) }}
        </div>
      </section>

      <section class="mzp-c-card mzp-c-card-extra-small">
        <img src="{{ static('protocol/img/logos/firefox/browser/nightly/logo-word-hor.svg') }}" alt="{{ ftl('installer-help-firefox-nightly-title-v2') }}" width="347" height="64" class="mzp-c-card-image">
        <div class="mzp-c-card-content">
          <p class="mzp-c-card-desc">
            {{ ftl('installer-help-firefox-nightly-desc') }}
          </p>
          {{ download_firefox('nightly', platform='desktop', force_direct=True, force_full_installer=True, locale=installer_lang, button_class='mzp-t-secondary mzp-t-md', alt_copy=ftl('download-button-download-now')) }}
        </div>
      </section>
    </div>
  {% endif %}

  <section class="install-help">
    <div>
      <h2>{{ ftl('installer-help-need-help') }}</h2>
      <p>
        {{ ftl('installer-help-need-help-desc', url='https://support.mozilla.org/kb/install-firefox-windows') }}
      </p>
    </div>
  </section>

</main>
{% endblock %}

{% block js %}{% endblock %}
